<template>
    <div>
        <div v-if="newsList" :class="{'shareComponnet':shareIos}">
            <div class="details_title">
                <p class="title">{{newsList.title||newsList.article_name}}</p>
                <div class="title_info">
                    <div class="title_info_ips">
                        <span class="title_date">{{newsList.source}}</span>
                        <span>{{newsList.create_time | time }}</span>
                    </div>
                    <div class="title_info_collection"  v-if="!newsList.is_collection_id" @click="isCollection">
                        <img src="@as/img/tongzhi_shoucanghou@2x.png" alt="">
                        <span>收藏</span>
                    </div>
                    <div class="title_info_collection" style="background: #F6F6F6;" v-if="newsList.is_collection_id" @click="cancelCollection">
                        <img src="@as/img/xuanchuan_shoucanghou_set.png" alt="">
                        <span style="color: #EB4D44">已收藏</span>
                    </div>

                </div>
            </div>
            <div class="details_content" v-html="newsList.content ||newsList.article_content"></div>
        </div>
        <share :shareData="shareData"  v-if="shareIos"  :bgColor="bgColor" />
    </div>
</template>

<script>
    import share from '@/views/home/components/share.vue';
    console.log(share);
    export default {
        data() {
            return {
                shareData:[],
                bgColor:{
                    swiperColor:'#fff',
                    codeColor:'#F5F5F5'
                },
                shareIos:false,
                isAndroid:false,
                orgnation_id:'',
                isIOS:false,
                checkbox: {
                    value: [],
                },
                newsId: '',
                type: '',
                newsList: {},
                collectionId: false,//收藏
                collection_id: '',//收藏的值
            }
        },
        components:{
            share,
        },
        created() {
            if(this.$route.query.fromIos){
                this.newsId = this.$route.query.id;
                this.type = this.$route.query.type;
                this.shareIos =true;
                this.orgnation_id =this.$route.query.orgnation_id
            }else{
                this.newsId = this.$route.query.id;
                this.type = this.$route.query.type;
            }
        },
        mounted() {
            this.$progress.done();
            this.getNewsDetails();
            var u = navigator.userAgent, app = navigator.appVersion;
            var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
            var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
            if (isAndroid) {
                //这个是安卓操作系统
                this.isAndroid =true;
                this.isIos =false;
                if(this.shareIos){
                    this.getAdShare(6)
                }
            }
            if (isIOS) {
                this.isAndroid =false;
                this.isIos =true;
                if(this.shareIos){
                    this.getAdShare(5)
                }
            }
        },
        methods: {
            getAdShare(id){
                this.$http
                    .get("app/My/add_list", {
                        org_id: this.orgnation_id,
                        position: id,
                    })
                    .then(res => {
                        if(res.code==200){
                            if(res.data.length>0){
                                this.shareData =res.data;
                            }else{
                                this.shareData=[
                                    {
                                        photo:'https://media.71ydj.com/17cd567662bafc8d63d73d41444585d2.jpg',
                                        link:'https://apps.apple.com/cn/app/id1434639733',
                                        remarks:'中纺机党建云',
                                    }
                                ]
                            }
                        }
                    })
            },
            /*
           * 获取新闻详情
           * */
            getNewsDetails() {
                this.$http
                    .get("app/NewCustom/new_info", {
                        id: this.newsId,
                        type: this.type,
                        uid: Cookies.get("user_71ydj")?JSON.parse(Cookies.get("user_71ydj")).id:'',
                    })
                    .then(res => {
                        if(res.code==200){
                            this.newsList = res.data;
                            if(res.data.collection_id){
                                this.collection_id =res.data.collection_id;
                            };
                            console.log( this.newsList );
                        }
                    })
            },
            /*收藏*/
            isCollection() {
                //添加收藏
                if(!Cookies.get("user_71ydj")){
                    this.$router.push({
                        path:'/mine'
                    })
                    return false
                }
                this.$http
                    .post("app/NewCustom/collection", {
                        uid: JSON.parse(Cookies.get("user_71ydj")).id,
                        id: this.newsList.id,
                        type:this.type,
                        resources_type:1,
                    })
                    .then(res => {
                        console.log(res)
                        this.newsList.is_collection_id=1;
                        this.collection_id =res.data.collection_id;
                    });
            },
            /*取消收藏*/
            cancelCollection(){
                if(!Cookies.get("user_71ydj")){
                    this.$router.push({
                        path:'/mine'
                    })
                    return false
                }
                this.$http
                    .post("app/NewCustom/cancel_collection", {
                        collection_id:this.collection_id,
                    })
                    .then(res => {
                        this.newsList.is_collection_id =0;
                    });
            }
        },
    }
</script>

<style scoped>
    p{
        margin: 0 ;
        padding: 0;
    }
    .details_title {
        width: 343px;
        margin: 0 auto;
    }

    .details_title .title {
        font-size: 18px;
        font-weight: bold;
        color: #333;
        line-height: 28px;
        margin-top: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .title_info {
        margin-top: 10px;
        margin-bottom: 10px;
        color: #999999;
        font-size: 12px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }


    .title_info_ips span {
        display: flex;
        flex-direction: column;
        word-wrap: break-word;
    }
    .title_info_ips   {
        line-height: 30px;
        /*vertical-align: middle;*/
        /*align-items: center;*/
    }
    .title_info .title_info_collection {
        min-width: 81px;
        background: linear-gradient(-90deg, rgba(235, 77, 68, 1) 0%, rgba(244, 117, 72, 1) 100%);
        border-radius: 13px;
        text-align: center;
        padding: 6px 10px;
        height: 30px;
    }
    .title_info .title_info_collection img {
        width: 15px;
        height: 14px;
        position: relative;
        top: 2px;
        left: -4px;
    }

    .title_info .title_info_collection span {
        font-size: 12px;
        color: #fff;
    }


</style>
<style>
    .details_content {
        width: 343px;
        margin: 0 auto 120px;
        overflow: hidden;
    }
    .details_content strong{
        font-size: 14px;
        color: #666;
        line-height: 25px;
        margin-top: 15px;
    }
    .details_content p {
        font-size: 14px;
        color: #666;
        line-height: 25px;
        /*text-indent: 2em;*/
        margin-top: 15px;
    }

    .details_content img {
        width: 100%;
        margin-top: 10px;
    }
    .shareComponnet{
        padding-bottom: 360px;
    }
</style>